import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {ConfigKey, CosumeSetting, QualitySetting} from "../../../script/constant/ConfigConstant";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {LightButton} from "../component/LightButton";
import {ItemInfo} from "../../interface/GuiInterface";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {publicGui} from "../../interface/PublicGui";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {ColorStr} from "../../../script/type/Type";

interface IProp {
    clearCallBack: () => void,
    x: number,
    y: number,
    goodIndex: number,
    item: ItemInfo
}
interface IState {
}
export default class GoodsBarContextMenu extends React.Element<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);

        this.state = {
            visible: true,
        }
    }

    render = () => {
        // const fontSize = Configer.getUIConfig(UIConfigKey.fontSize);
        const backPos = { x: this.props.x, y: this.props.y }

        let height = 0.08;

        let visible = false;

        if (this.props.goodIndex && this.props.goodIndex >= 0) {
            if (!CodeUtil.isNullOrZero(this.props.item?.strId)) {
                visible = true;
            }
        }


        const goodsContextBoardPath = Configer.getResource(ResourceKey.goodsContextBoardPath);
        const goodsContextUsePath = Configer.getResource(ResourceKey.goodsContextUsePath);
        const goodsContextDropPath = Configer.getResource(ResourceKey.goodsContextDropPath);
        const goodsContextSellPath = Configer.getResource(ResourceKey.goodsContextSellPath);
        const goodsContextForgPath = Configer.getResource(ResourceKey.goodsContextForgPath);
        const goodsContextWashPath = Configer.getResource(ResourceKey.goodsContextWashPath);
        const goodsContextDecomposePath = Configer.getResource(ResourceKey.goodsContextDecomposePath);

        const useSize = { h: 0.02, w: 0.04 }

        const template = DataRouter.getItemDataByItemId(this.props.item?.strId);
        const goodPosition = template?.position;

        let useAble = false;
        if (goodPosition && goodPosition > 0) {
            useAble = true;
            height = 0.2
        }

        return <View   key={GuiKeys.goodsBarContextMenu} style={{ hidden: !visible, backgroundImage: goodsContextBoardPath, left: backPos.x, top: backPos.y, width: 0.06, height: height }}>
            <LightButton key={GuiKeys.goodsBarContextMenuUseButton} onMouseDown={() => { return this.useItem() }} style={{ hidden: !useAble, backgroundImage: goodsContextUsePath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
            <LightButton key={GuiKeys.goodsBarContextMenuforgButton} onMouseDown={() => { return this.forgItem() }} style={{ hidden: !useAble, backgroundImage: goodsContextForgPath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
            <LightButton key={GuiKeys.goodsBarContextMenuWashButton} onMouseDown={() => { return this.washItem() }} style={{ hidden: !useAble, backgroundImage: goodsContextWashPath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
            <LightButton key={GuiKeys.goodsBarContextMenuDropButton} onMouseDown={() => { return this.dropItem() }} style={{ backgroundImage: goodsContextDropPath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
            <LightButton key={GuiKeys.goodsBarContextMenuDecomposeButton} onMouseDown={() => { return this.decomposeItem() }} style={{ hidden: !useAble, backgroundImage: goodsContextDecomposePath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
            <LightButton key={GuiKeys.goodsBarContextMenuSellButton} onMouseDown={() => { return this.sellItem() }} style={{ backgroundImage: goodsContextSellPath, width: useSize.w, height: useSize.h, marginT: 0.01, marginL: 0.015 }}></LightButton>
        </View>
    }


    useItem = () => {
        this.props.clearCallBack();
        const syncData: UISyncData = { id: SyncId.useItem, param: { index: this.props.goodIndex } };
        return syncData;
    }
    dropItem = () => {
        this.props.clearCallBack();
        const syncData: UISyncData = { id: SyncId.dropItem, param: { index: this.props.goodIndex } };
        return syncData;
    }
    sellItem = () => {
        this.props.clearCallBack();
        const tempIndex = this.props.goodIndex;
        const fun = () => {
            const syncData: UISyncData = { id: SyncId.sellItem, param: { index: tempIndex } };
            return syncData;
        }
        const text = CodeUtil.getColorStr(ColorStr.black, `是否确认出售？`)
        publicGui.showDialogPage(0.11,  undefined, text, ResourceKey.petBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);
    }

    washItem = () => {
        this.props.clearCallBack();
        // const lv = this.props.item?.lv;
        const washSetting: CosumeSetting = Configer.getConfig(ConfigKey.washSetting);
        const cosumeId = washSetting.cosumeId;
        const cosumeNum = washSetting.cosumeNum;
        const success = washSetting.success;
        const failed = washSetting.failed;
        const tempIndex = this.props.goodIndex;
        const fun = () => {
            const syncData: UISyncData = { id: SyncId.washItem, param: { index: tempIndex } };
            return syncData;
        }
        const text = CodeUtil.getColorStr(ColorStr.black, `洗炼后会重置装备词缀\n消耗：${cosumeId}x${cosumeNum}\n成功率${success}%\n是否继续？`)
        publicGui.showDialogPage(0.11,  undefined, text, ResourceKey.petBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);
    }

    decomposeItem = () => {
        this.props.clearCallBack();
        // const lv = this.props.item?.lv;
        const tempIndex = this.props.goodIndex;
        const fun = () => {
            const syncData: UISyncData = { id: SyncId.decomposeItem, param: { index: tempIndex } };
            return syncData;
        }
        const text = CodeUtil.getColorStr(ColorStr.black, `是否确认分解？`)
        publicGui.showDialogPage(0.11,  undefined, text, ResourceKey.petBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);
    }

    forgItem = () => {
        this.props.clearCallBack();
        const washSettings: CosumeSetting[] = Configer.getConfig(ConfigKey.forgSetting);
        const lv = this.props.item.lv;
        const set = washSettings[lv];
        if (set) {
            const cosumeId = set.cosumeId;
            const cosumeNum = set.cosumeNum;
            const success = set.success;
            const failed = set.failed;
            const forgAddRadix = Configer.getConfig(ConfigKey.forgAddRadix);
            const tempIndex = this.props.goodIndex;
            const fun = () => {
                const syncData: UISyncData = { id: SyncId.forgItem, param: { index: tempIndex } };
                return syncData;
            }
            const text = CodeUtil.getColorStr(ColorStr.black, `锻造后基本属性增加${forgAddRadix * 100}%\n消耗：${cosumeId}x${cosumeNum}\n成功率${success}%\n是否继续？`)
            publicGui.showDialogPage(0.11,  undefined,text, ResourceKey.petBoard, ResourceKey.dialogDeleteArchiveOk, ResourceKey.dialogDeleteArchiveCanel, fun, undefined);
        } else {
            Logger.toastProduct('锻造等级已达到最高', PlayerFactory.getInstance().getLocalPlayer())
        }
    }
}